<template>
<div class="home">
  <!-- <Header :bgcolor="'rgba(0,0,0,0.8)'" /> -->

  <!-- 调色盘 -->
  <div class="change-color hand" v-if="isShowChangeColor" v-show="activeChangeColor" @click.stop="activeChangeColor = false">
    <img src="static/images/home/tsp.png" alt="">
    <p>换色</p>
  </div>
  <div class="change-circle" v-if="!activeChangeColor">
    <div class="change-circle-item hand" style="left:135px;top:119px;color:#fff;" @click.stop="activeChangeColor = true">
      <i class="el-icon-error" style="font-size:32px;"></i>
    </div>
    <div
      :class="{'change-circle-item': true, 'hand': true, 'active': activeColor == item.color}" 
      v-for="(item, index) in themeColorArr"
      :key="index"
      :style="{'left': item.left, 'top': item.top, 'background': item.color}"
      @click.stop="changeColor(item)"
    ></div>
  </div>

  <div class="content content-1">
    <!-- <Carousel /> -->

    <!-- 顶部大图 -->
    <div class="pr top-banner">
      <!-- <img src="static/images/home/头部.jpg" alt="" style="width: 100%;"> -->
      <iframe :src="panoBanner" frameborder="0" style="width:100%;height:730px;"></iframe>
      <div class="pac top-banner-text">
        <p>{{PanoShowText}}</p>
        <hr />
      </div>
    </div>

    <div class="module-show margin-xauto min-h300" v-if="list && list.length > 0">
      <!-- 模块名 -->
      <div class="tac" style="margin-top: 20px;margin-bottom:-30px;">
        <div class="line-common ">精彩世界  全景展示</div>
      </div>
      <PanoList :list="list" lefttop="0" />
    </div>
  </div>

  <div class="content" v-if="showMenu && showMenu.length > 0">
    <div class="module-show margin-xauto">
      <!-- 模块名 -->
      <div class="tac" style="margin-top: 10px;">
        <div class="line-common ">VR产品解决方案  让营销落地更轻松</div>
      </div>
    </div>
  </div>

  <!-- 所有产品模块 -->
  <div class="content all-h" v-if="showMenu && showMenu.length > 0">
    
    <div v-for="(item, index) in moduleArr" :key="index">
      <!-- 模块样式一 -->
      <div class="h_cont2" v-if="index%2===0" v-show="item.show">
        <div class="h_cont2w">
          <div class="h_cont2l fl">
            <h1>{{item.h}}</h1>
            <p>{{item.p}}</p>
            <span class="hand" @click="viewCase(item.path)">{{item.span}}</span>
          </div>
          <!-- <img :src="item.src" class="h_cont2r fr"> -->
          <el-image :src="item.src" class="full h_cont2r fr">
            <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
            <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          </el-image>
        </div>
      </div>
      <!-- 模块样式二 -->
      <div class="h_cont3" v-show="item.show" v-else>
        <div class="h_cont3w">
          <div class="h_cont2l fr">
            <h1>{{item.h}}</h1>
            <p>{{item.p}}</p>
            <span class="hand" @click="viewCase(item.path)">{{item.span}}</span>
          </div>
          <!-- <img :src="item.src" class="h_cont2r fl"> -->
          <el-image :src="item.src" class="full h_cont2r fl">
            <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
            <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          </el-image>
        </div>
      </div>
      <div class="clear" v-show="item.show"></div>
    </div>

  </div>
  

  <!-- VR全景 -->
  <!-- <div class="content" v-if="VR_PANO">
    <div class="module-show margin-xauto">
      <div class="flex product-pano module-panotop">
        <div class="product-pano-left flex">
          <div class="product-num " @mouseenter="hoverEnter(0)" @mouseleave="hoverOut" :style="hoverColor[0]?styleColorObj:''">01</div>
          <div class="product-intro marl-1">
            <h3>VR全景 - 可视化编辑</h3>
            <p>
              傻瓜式拖拽操作，实现个性化全景漫游<br />
              40+ 丰富的全景交互功能，让消费者足不出户声临其境<br />
              20+ 行业插件结合在线商城，打造完美逼真的线上营销场景
            </p>
            <div class="view-case hand" @click="viewCase(1)">查看案列</div>
          </div>
        </div>
        <div class="product-pano-right">
          <h3 class="carousel-title ">全景智慧城市</h3>
          <el-carousel :interval="4000" type="card" height="187px" class="">
            <el-carousel-item v-for="(item, index) in cardArr" :key="index">
              <div class="card-item">
                <img :src="`static/images/home/${item.src}`" alt="" style="max-width:100%;max-height:187px;">
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div> -->

  <!-- GIF -->
  <!-- <div class="content" style="background: url(static/images/home/diwen1.png)" v-if="VR_PANO">
    <div class="module-show margin-xauto">
      <div class="module-panobottom ">
        <img src="static/images/home/平板@2x.png" alt="" style="width:100%;">
      </div>
    </div>
  </div> -->

  <!-- VR视频 -->
  <!-- <div class="content" style="background: url(static/images/home/diwen2.png)" v-if="VR_VIDEO">
    <div class="module-show margin-xauto">
      <div class="flex product-pano module-video">
        <div class="product-pano-left flex">
          <div class="product-num" @mouseenter="hoverEnter(1)" @mouseleave="hoverOut" :style="hoverColor[1]?styleColorObj:''">02</div>
          <div class="product-intro marl-2">
            <h3>VR视频</h3>
            <p>
              三维全景动态漫游实现360°全景无死角动态展示<br />
              视图文链接加强互动体验<br />
              适配PC端、移动端以及VR设备，可嵌套网站<br />
            </p>
            <div class="hand view-case" @click="viewCase(2)">查看案列</div>
          </div>
        </div>
        <div class="product-pano-right">
          <img src="static/images/home/图1@2x.png" alt="" class="">
        </div>
      </div>
    </div>
  </div> -->

  <!-- VR直播高效服务 -->
  <!-- <div class="content" v-if="VR_LIVE">
    <div class="module-show margin-xauto">
      <div class="flex product-pano module-live">
        <div class="product-pano-right">
          <img src="static/images/home/图2@2x.png" alt="" class="">
        </div>
        <div class="product-pano-left flex jc-end padr40">
          <div class="product-intro marl-3 tar ">
            <h3>VR直播高效服务</h3>
            <p>
              VR直播互动功能，共享动态沉浸<br />
              微信扫码授权，弹幕交流观看体验<br />
              指尖一动点赞分享，完成直播间社交裂变
            </p>
            <div class="hand view-case" @click="viewCase(3)">查看案列</div>
          </div>
          <div class="product-num " @mouseenter="hoverEnter(2)" @mouseleave="hoverOut" :style="hoverColor[2]?styleColorObj:''">03</div>
        </div>
      </div>
    </div>
  </div> -->

  <!-- VR房地产 -->
  <!-- <div class="content" v-if="VR_ESTATE">
    <div class="module-show margin-xauto">
      <div class="flex product-pano module-estate">
        <div class="product-pano-left flex">
          <div class="product-num " @mouseenter="hoverEnter(3)" @mouseleave="hoverOut" :style="hoverColor[3]?styleColorObj:''">04</div>
          <div class="product-intro marl-4">
            <h3>VR房地产行业专属方案</h3>
            <p>
              3D全景区位图，立体化展示楼盘景观布局<br />
              户型交互式展示，户型漫游推广主力房型<br />
              电子楼书，房地产宣传册线上展示
            </p>
            <div class="hand view-case" @click="viewCase(4)">查看案列</div>
          </div>
        </div>
        <div class="product-pano-right">
          <img src="static/images/home/图3@2x.png" alt="" class="">
        </div>
      </div>
    </div>
  </div> -->

  <!-- 3D模型 -->
  <!-- <div class="content" style="background: url(static/images/home/diwen3.png)" v-if="THREEM">
    <div class="module-show margin-xauto">
      <div class="flex product-pano module-huanwu">
        <div class="product-pano-right">
          <img src="static/images/home/图4@2x.png" alt="" class="">
        </div>
        <div class="product-pano-left flex jc-end padr40">
          <div class="product-intro marl-5 tar ">
            <h3>3D模型</h3>
            <p>
              360°物品展示，呈现精致细节<br />
              可结合在线商城功能全方位展示商品包装及品质<br />
              也可形成热点嵌入场景
            </p>
            <div class="hand view-case" @click="viewCase(5)">查看案列</div>
          </div>
          <div class="product-num " @mouseenter="hoverEnter(4)" @mouseleave="hoverOut" :style="hoverColor[4]?styleColorObj:''">05</div>
        </div>
      </div>
    </div>
  </div> -->

  <!-- VR全景行业应用 -->
  <div class="content industry-application">
    <div class="module-show margin-xauto">
      <div class="tac industry-application-top">
        <div class="line-common ">VR全景行业应用</div>
      </div>
      <div class="industry-application-bottom">
        <el-row :gutter="34" style="margin-bottom: 30px;">
          <el-col :span="12">
            <div class="industry-application-bottom-item">
              <div class="industry-application-bottom-item-img">
                <!-- <img src="static/images/home/hye1.png" alt="" style="height: 320px;width: 100%;"> -->
                <el-image src="static/images/home/hye1.png" style="height: 320px;width: 100%;">
                  <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                  <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                </el-image>
              </div>
              <div class="industry-application-bottom-item-desc">
                <h3 class="tac">餐饮行业</h3>
                <div class="industry-application-bottom-item-desc-p">
                  <p class="tac">全景展示餐厅环境，线上预定线下引流，稳定客流量</p>
                  <p class="tac">720°展现核心优势，打造一站式餐饮服务</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="industry-application-bottom-item">
              <div class="industry-application-bottom-item-img">
                <!-- <img src="static/images/home/hye2.png" alt="" style="height: 320px;width: 100%;"> -->
                <el-image src="static/images/home/hye2.png" style="height: 320px;width: 100%;">
                  <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                  <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                </el-image>
              </div>
              <div class="industry-application-bottom-item-desc">
                <h3 class="tac">装饰行业</h3>
                <div class="industry-application-bottom-item-desc-p">
                  <p class="tac">真实样板房无死角展示，装修日记助力成单</p>
                  <p class="tac">客户看房省时省力，企业宣传降低成本</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <div class="industry-application-bottom-item">
              <div class="industry-application-bottom-item-img">
                <el-image src="static/images/home/hye3.png" style="height: 420px;width: 100%;">
                  <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                  <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                </el-image>
                <!-- <img src="static/images/home/hye3.png" alt="" style="height: 420px;width: 100%;"> -->
              </div>
              <div class="industry-application-bottom-item-desc">
                <h3 class="tac">酒店行业</h3>
                <div class="industry-application-bottom-item-desc-p">
                  <p class="tac">房型风格空间完整展示，精准服务，提升酒店利润</p>
                  <p class="tac">行业插件预定房型，营销插件开展活动</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="industry-application-bottom-item">
              <div class="industry-application-bottom-item-img">
                <!-- <img src="static/images/home/hye4.png" alt="" style="height: 420px;width: 100%;"> -->
                <el-image src="static/images/home/hye4.png" style="height: 420px;width: 100%;">
                  <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                  <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                </el-image>
              </div>
              <div class="industry-application-bottom-item-desc">
                <h3 class="tac">教育行业</h3>
                <div class="industry-application-bottom-item-desc-p">
                  <p class="tac">高校展会实景导航，全景互动传承文化普及教育知识</p>
                  <p class="tac">助力展馆形象品牌创收，高校体现校园实力风采</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="industry-application-bottom-item">
              <div class="industry-application-bottom-item-img">
                <!-- <img src="static/images/home/hye5.png" alt="" style="height: 420px;width: 100%;"> -->
                <el-image src="static/images/home/hye5.png" style="height: 420px;width: 100%;">
                  <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                  <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
                </el-image>
              </div>
              <div class="industry-application-bottom-item-desc">
                <h3 class="tac">旅游行业</h3>
                <div class="industry-application-bottom-item-desc-p">
                  <p class="tac">打造大型景区身临其境交互场景，智能实景漫游</p>
                  <p class="tac">全景二维码链接分享，轻松实现社交圈聚流</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="flex industry-application-bottom">
        <div class="industry-application-img">
          <img :src="activeImage" alt="" class="">
        </div>
        <div class="industry-application-intro">
          <el-collapse accordion @change="changAcco" v-model="activeIndus">
            <el-collapse-item :name="item.name" v-for="(item, index) in industryIntro" :key="index">
              <template slot="title">
                <i :class="[activeIndus == item.name?'el-icon-caret-bottom': 'el-icon-caret-right', 'fs-l']" :style="activeIndus == item.name?styleColorObj:''"></i>
                <span :style="activeIndus == item.name?styleColorObj:''" class="fs-b strong">{{item.title}}</span>
              </template>
              <div v-for="(tx, ix) in item.txt" :key="ix" class="padl30 fs-b">{{tx}}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div> -->
    </div>
  </div>

  <!-- 服务与支持 -->
  <div class="content">
    <div class="module-show margin-xauto">

      <div class="tac service-title">
        <div class="line-common ">我们提供全方位服务与支持</div>
      </div>
      <!-- Swiper -->
      <CarouselSwp :color="styleColorObj.color" />

    </div>
  </div>

  <!-- 底部 -->
  <div class="wave">
    <img src="static/images/home/波浪@2x1.png" alt="">
  </div>

  <Aside />
  
  <Footer />
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    Carousel: _ => import('@/components/common/Carousel'),
    PanoList: _ => import('@/components/common/PanoList'),
    Aside: _ => import('@/components/common/Aside'),
    CarouselSwp: _ => import('@/components/common/CarouselSwp'),
  },
  data() {
    return {
      PanoShowText: $globalconfig.PANO_SHOW_TEXT,
      moduleArr: [
        {h: 'VR全景 - 可视化编辑', p: '傻瓜式拖拽操作，实现个性化全景漫游。40+丰富的全景交互功能，让消费者足不出户身临其境。20+行业插件结合在线商城，打造完美逼真的线上营销场景。', span: '查看案列', path: '1', src: 'static/images/home/vrq1.png', show: false, menu_id: 2001},
        {h: 'VR视频', p: '三维全景动态漫游实现360°全景无死角动态展示。视图文链接加强互动体验。适配PC端、移动端以及VR设备，可嵌套网站。', span: '查看案列', path: '2', src: 'static/images/home/vrq2.png', show: false, menu_id: 2002},
        {h: 'VR房地产行业专属方案', p: '3D全景区位图，立体化展示楼盘景观布局。户型交互式展示，户型漫游推广主力房型。电子楼书，房地产宣传册线上展示。', span: '查看案列', path: '4', src: 'static/images/home/vrq3.png', show: false, menu_id: 2004},
        {h: 'VR展厅', p: '全馆小地图导航、展品3D展示、展馆活动VR直播引流、实时带看解说功能帮助企业商家打造沉浸式移动展厅。', span: '查看案列', path: '7', src: 'static/images/home/vrq4.png', show: false, menu_id: 2007},
        {h: 'VR旅游', p: '景区智能导览图、VR热点线路推荐，旅游行业双战术模板功能航拍交互、周边景点定位标距，提供智享云端旅游方案。', span: '查看案列', path: '8', src: 'static/images/home/vrq5.png', show: false, menu_id: 2008},
        {h: 'VR直播高效服务', p: 'VR直播互动功能，共享动态沉浸。微信扫码授权，弹幕交流观看体验。指尖一动点赞分享，完成直播间社交裂变。', span: '查看案列', path: '3', src: 'static/images/home/vrq6.png', show: false, menu_id: 2003},
        {h: 'VR行走漫游', p: '提供集全景拍摄、空间漫游、行业营销为一体的软硬件协同解决方案，3D空间虚拟重建精准还原空间结构，720°场景内自由行走，加强沉浸。', span: '查看案列', path: '9', src: 'static/images/home/vrq7.png', show: false, menu_id: 2009},
        {h: '360环物', p: '360°物品展示，呈现精致细节。可结合在线商城功能全方位展示商品包装及品质。也可形成热点嵌入场景。', span: '查看案列', path: '6', src: 'static/images/home/vrq8.png', show: false, menu_id: 2006},
        {h: '3D模型', p: '建好的模型可直接上传发布，一体模型、贴图模型满足多行业需求，提供展馆模式展示、语音文字介绍，产品概念更强烈。', span: '查看案列', path: '5', src: 'static/images/home/vrq9.png', show: false, menu_id: 2005},
      ],
      panoBanner: '', // 顶部作品地址
      activeChangeColor: true, // 调色盘
      isShowChangeColor: $globalconfig.IS_SHOW_CHANGE_COLOR, // 是否展示调色盘
      themeColorArr: $globalconfig.THEME_COLOR_ARR,
      activeColor: $globalconfig.THEME_COLOR,
      styleColorObj: {
        color: $globalconfig.THEME_COLOR,
      },
      hoverColor: [0, 0, 0, 0, 0],
      opts: {
        pageIndex: 1,
        pageSize: 8,
      },
      activeImage: 'static/images/home/yy1.png',
      activeIndus: '1',
      industryIntro: [
        {
          title: '餐饮行业',
          name: '1',
          src: 'static/images/home/yy1.png',
          txt: ['全景展示餐厅环境，线上预定线下引流，稳定客流量', '720°展现核心优势，打造一站式餐饮服务'],
        },
        {
          title: '装饰行业',
          name: '2',
          src: 'static/images/home/yy2.png',
          txt: ['真实样板房无死角展示，装修日记助力成单', '客户看房省时省力，企业宣传降低成本'],
        },
        {
          title: '酒店行业',
          name: '3',
          src: 'static/images/home/yy3.png',
          txt: ['房型风格空间完整展示，精准服务，提升酒店利润', '行业插件预定房型，营销插件开展活动'],
        },
        {
          title: '旅游行业',
          name: '4',
          src: 'static/images/home/yy4.png',
          txt: ['打造大型景区身临其境交互场景，智能实景漫游', '全景二维码链接分享，轻松实现社交圈聚流'],
        },
        {
          title: '商超行业',
          name: '5',
          src: 'static/images/home/yy5.png',
          txt: ['实体商店传统升级，360°展示商品一键购买', '实现VR线上购物，打造智慧门店'],
        },
        {
          title: '教育行业',
          name: '6',
          src: 'static/images/home/yy6.png',
          txt: ['高校展会实景导航，全景互动传承文化普及教育知识', '助力展馆形象品牌创收，高校体现校园实力风采'],
        },
      ],
      cardArr: [
        {src: '智慧城市1.jpg'},
        {src: '智慧城市2.jpg'},
        {src: '智慧城市3.jpg'},
      ],
      list: [],
    }
  },
  computed: {
    ...mapGetters(['siteMenu']),
    // 产品模块过滤
    showMenu () {
      let arr = []
      if (this.siteMenu && this.siteMenu.length > 0) {
        let temparr = this.siteMenu.filter(item => item.menu_id === 2000)
        if (temparr && temparr.length > 0) {
          if (temparr[0].functions && temparr[0].functions.length > 0) {
            arr = temparr[0].functions
            arr.map(item => {
              this.moduleArr.map(mo => {
                if (mo.menu_id === item.menu_id) {
                  mo.show = true
                }
              })
            })
          }
        }
      }
      // console.log(arr)
      return arr
    },
  },
  created() {
    this.$api.getPanoUrl().then(res => {
      // console.log(res)
      if (res.code == 100) {
        this.panoBanner = res.data[0].panoview_url
      }
    })
    this.$api.getIndexPanoList(this.opts).then(res => {
      // console.log(res)
      if (res.code == 100) {
        if (res.data && res.data.length > 0) {
          this.list = res.data
        }
      }
    })
  },
  methods: {
    changeColor(item) {
      this.activeColor = item.color
      $globalconfig.THEME_COLOR = item.color
      this.styleColorObj.color = item.color
      document.body.style.setProperty('--themeColor', item.color)
      this.activeChangeColor = !this.activeChangeColor
    },
    // 鼠标悬停切换颜色
    hoverEnter(val) {
      this.hoverColor.splice(val, 1, 1)
    },
    hoverOut() {
      this.hoverColor = [0, 0, 0, 0, 0]
    },
    // 查看案列
    viewCase(t) {
      this.$router.push({
        name: 'product',
        query: {t: t}
      })
    },
    // 全景行业应用-手风琴
    changAcco(val) {
      // console.log(val)
      if (val) {
        this.activeIndus = val
        this.activeImage = this.industryIntro[val-1].src
      } else {
        this.activeIndus = -1
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.marl-1
  margin-left 38px
.marl-2
  margin-left 47px
.marl-3
  margin-right 14px
.marl-4
  margin-left 60px
.marl-5
  margin-right 14px
.padr40
  padding-right 40px

.padl30
  padding-left 30px
.home
  position relative
  .content-1
    margin-top 52px
  .change-circle
    width 270px
    height 270px
    border-radius 50%
    position absolute
    left -135px
    top 113px
    z-index 4
    background-color rgba(0,0,0,.7)
    .change-circle-item
      width 32px
      height 32px
      border-radius 50%
      position absolute
      &.active
        border 4px solid #fff
  .change-color
    width 48px
    height 64px
    position absolute
    left 0
    top 216px
    padding 6px 8px
    z-index 3
    background-color rgba(0,0,0,.8)
    img
      width 32px
      height 32px
    p
      font-size 14px
      margin-top 3px
      font-family PingFang SC
      font-weight 400
      color #FFFFFF
  .wave
    position relative
    bottom -62px
    z-index -1
    img
      width 100%
  .industry-application
    background-color #f8f8f8
    .industry-application-top
      padding 30px 0 30px
    .industry-application-bottom
      padding-bottom 50px
      .industry-application-bottom-item
        position relative
        cursor pointer
        overflow hidden
        &:hover
          .industry-application-bottom-item-desc
            bottom 30px
        .industry-application-bottom-item-img
          width 100%
        .industry-application-bottom-item-desc
          width 100%
          position absolute
          bottom -45px
          transition all 0.5s
          h3
            font-size 40px
            color #fff
            margin-bottom 24px
            font-family PingFang SC
          .industry-application-bottom-item-desc-p
            p
              font-size 16px
              color #fff
              font-weight bold
              font-family PingFang SC
              &:first-child
                margin-bottom 5px
  
  .content
    min-width 1200px
    .top-banner
      .top-banner-text
        // width 352px
        // top 42%
        // left 38.5%
        p
          text-align center
          font-size 47px
          font-family PingFang SC
          font-weight bold
          color #FFFFFF
          text-shadow 0px -2px 5px rgba(0, 0, 0, 0.5)
          margin-bottom 20px
        hr
          height 2px
          border 0
          background-color #fff
          margin 0
          padding 0
    .module-show
      width 1200px
      
      .line-common
        display inline-block
        padding 0 9px
        margin 43.1px 0 46.1px
        line-height 1px
        border-left 86px solid #333
        border-right 86px solid #333
        text-align center
        font-size 22px
        font-family PingFang SC
        font-weight bold
        color #000000
      .product-pano
        width 100%
        justify-content space-between
        .product-pano-left
          width 52.6%
          .product-num
            width 229px
            height 200px
            font-size 253px
            font-family Microsoft YaHei
            font-weight bold
            color #F2F2F2
            letter-spacing -30px
            line-height 0.75
            text-align center
          .product-intro
            h3
              width 100%
              height 14px
              font-size 14px
              font-family PingFang SC
              font-weight bold
              color #000000
              line-height 18px
              margin-top 37px
              margin-bottom 30px
            p
              line-height 23px
              font-size 12px
              font-family PingFang SC
              font-weight 400
              color #000000
              margin-bottom 14px
            div.view-case
              display inline-block
              width 104px
              height 29px
              font-size 14px
              line-height 29px
              text-align center
              color var(--themeColor)
              border 1px solid var(--themeColor)
              &:hover
                background-color #f5f5f5

        .product-pano-right
          width 45%
          max-width 520px
          img
            width 100%
          .card-item
            background #FFFFFF
            border-radius 16px
            padding 0 37px
          .carousel-title
            height 24px
            font-size 14px
            font-family PingFang SC
            font-weight bold
            color #000000
            text-align center
      .module-panotop
        padding-top 54px
      .module-panobottom
        margin-top 32px
      .module-video
        padding-top 100px
        padding-bottom 16px
      .module-live
        padding-top 100px
        padding-bottom 16px
      .module-estate
        padding-top 100px
        padding-bottom 16px
      .module-huanwu
        padding-top 100px
        padding-bottom 16px

      .service-title
        margin-top 48px
  .all-h
    margin-bottom 100px
    .h_cont2
      background url(/static/images/home/h_cont2_02.png) center top
      height 772px
      .h_cont2w
        width 1200px
        margin 0 auto
        padding-top 172px
        .h_cont2l
          width 436px
          margin-top 32px
          h1
            font-size 36px
            color #222
            font-weight bold
          p
            color #333
            font-size 16px
            line-height 26px
            margin-top 20px
          span
            width 199px
            height 58px
            font-size 16px
            line-height 58px
            text-align center
            border-radius 50px
            display block
            background var(--themeColor)
            color #fff
            margin-top 65px
        .h_cont2r
          width 626px
          height 389px
          border-radius 10px
          box-shadow 0px 20px 30px 15px rgba(0, 0, 0, 0.15)
          -webkit-box-shadow 0px 20px 30px 15px rgba(0, 0, 0, 0.15)
          -moz-box-shadow 0px 20px 30px 15px rgba(0, 0, 0, 0.15)
    .h_cont3
      height 389px
      .h_cont3w
        width 1200px
        margin 0 auto
        .h_cont2l
          width 436px
          margin-top 32px
          h1
            font-size 36px
            color #222
            font-weight bold
          p
            color #333
            font-size 16px
            line-height 26px
            margin-top 20px
          span
            width 199px
            height 58px
            font-size 16px
            line-height 58px
            text-align center
            border-radius 50px
            display block
            background var(--themeColor)
            color #fff
            margin-top 65px
        .h_cont2r
          width 626px
          height 389px
          border-radius 10px
          box-shadow 0px 20px 30px 15px rgba(0, 0, 0, 0.15)
          -webkit-box-shadow 0px 20px 30px 15px rgba(0, 0, 0, 0.15)
          -moz-box-shadow 0px 20px 30px 15px rgba(0, 0, 0, 0.15)

</style>
<style lang="stylus">
.home
  .product-pano-right
    .el-carousel
      &.el-carousel--horizontal
        overflow-x visible
      .el-carousel__item--card
        border-radius 16px
        box-shadow 0px 0px 11px 5px rgba(41, 110, 250, 0.1)
    .el-carousel__indicators--outside
      display none !important
  .industry-application-intro
    .el-collapse
      border 0 !important
      .el-collapse-item__arrow
        display none
      .el-collapse-item__header
        background-color #f8f8f8
        border 0 !important
        &:hover
          i, span
            color var(--themeColor)
      .el-collapse-item__wrap
        background-color #f8f8f8
        border 0 !important
</style>
